<template>
  <div class="flex justify-between text-[#e54c5f]">
    <div class="flex items-center cursor-pointer" @click="handleGo">
      <el-icon>
        <ArrowLeftBold />
      </el-icon>
      <span class="pl-5">{{$t('订单详情')}}</span>
    </div>
    <div>
    <el-button
        type="success" :icon="Check"
        class="w-24"
        @click="withdrawAudit(1)"
        v-btn="['all', 'web_withdraw_audit']"
        v-if="form.status == 0 && form.mer_review_status == 0"
        >{{$t('审核通过')}}</el-button>
      <el-button
        type="primary" :icon="Warning"
        class="w-24"
        @click="withdrawAudit(2)"
        v-btn="['all', 'web_withdraw_audit']"
        v-if="form.status == 0 && form.mer_review_status == 0"
        >{{$t('审核拒绝')}}</el-button>
      <el-button
        type="danger" :icon="Close"
        class="w-24"
        v-if="form.status == 0 && form.mer_review_status == 0"
        @click="handleCancel(form)"
        v-btn="['all', 'web_withdraw_cancel']"
        >{{$t('取消提现')}}</el-button>
    </div>
  </div>

  <el-card class="my-5">
    <template #header>
      <div class="card-header">
        <span>{{$t('基本信息')}}</span>
      </div>
    </template> 
    <el-skeleton :rows="5" animated :loading="loading">
      <div class="px-12">
        <div class="flex">
          <div class="flex-1">
            <ul class="text-center text-base">
              <li class="flex justify-around mb-2">
                <span class="w-36 text-right">{{$t('订单号')}}</span>
                <span class="w-1/2 text-left">{{ form.order_no }}</span>
              </li>
              <li class="flex justify-around mb-2">
                <span class="w-36 text-right">{{$t('订单状态')}}</span>
                <span class="w-1/2 text-left">
                  {{ form.status_name }}
                </span>
              </li>
              <li class="flex justify-around mb-2">
                <span class="w-36 text-right">{{$t('提现金额')}}</span>
                <span class="w-1/2 text-left">{{ numberToCurrencyNo(form.amount) }} {{ form.currency }}</span>
              </li>
              <li class="flex justify-around mb-2">
                <span class="w-36 text-right">{{$t('创建时间')}}</span>
                <span class="w-1/2 text-left">{{ formatDates(form.create_time) }}</span>
              </li>
              <li class="flex justify-around mb-2">
                <span class="w-36 text-right">{{$t('完成时间')}}</span>
                <span class="w-1/2 text-left">{{ formatDates(form.finish_time) }}</span>
              </li>
            </ul>
          </div>
          <div class="flex-1"></div>
        </div>
      </div>
    </el-skeleton>
  </el-card>
  <el-card class="mb-4">
    <template #header>
      <div class="card-header">
        <span>{{$t('收款信息')}}</span>
      </div>
    </template>
    <el-skeleton :rows="5" animated :loading="loading">
      <div class="px-12">
        <!-- 收款信息 -->
        <div class="flex">
          <!-- 收款账户信息 -->
          <div class="flex-1">
            <ul class="text-center text-base">
              <li class="flex justify-around mb-2">
                <span class="w-36 text-right">{{$t('收款账户名称')}}</span>
                <span class="w-1/2 text-left">{{ form.name }}</span>
              </li>
              <li class="flex justify-around mb-2">
                <span class="w-36 text-right">{{$t('收款银行名称')}}</span>
                <span class="w-1/2 text-left">{{ form.bank }}</span>
              </li>
              <li class="flex justify-around mb-2">
                <span class="w-36 text-right">{{$t('收款银行账号')}}</span>
                <span class="w-1/2 text-left">{{ form.card_number }}</span>
              </li>
              <li class="flex justify-around mb-2">
                <span class="w-36 text-right">{{$t('收款人名称')}}</span>
                <span class="w-1/2 text-left">{{ form.card_name }}</span>
              </li>
              <li class="flex justify-around mb-2">
                <span class="w-36 text-right">{{$t('收款银行地址')}}</span>
                <span class="w-1/2 text-left">{{ form.bank_address }}</span>
              </li>
              <li class="flex justify-around mb-2">
                <span class="w-36 text-right">{{$t('SWIFT/BIC')}}</span>
                <span class="w-1/2 text-left">{{ form.swift_code }}</span>
              </li>
              <li class="flex justify-around mb-2" v-if="form.extended">
                <span class="w-36 text-right">{{$t('银行补充信息')}}</span>
                <span class="w-1/2 text-left">{{ form.extended }}</span>
              </li>
            </ul>
          </div>
          <!-- 付款账户信息 -->
          <div class="flex-1">
          </div>
        </div>
      </div>
    </el-skeleton>
  </el-card>
  <el-card class="mb-4">
    <template #header>
      <div class="card-header">
        <span>{{$t('付款信息')}}</span>
      </div>
    </template>
    <el-skeleton :rows="5" animated :loading="loading">
    <template v-if="form.sends && form.sends.length > 0">
      <el-table :data="form.sends" border v-loading="loading">
      <el-table-column prop="send_pay_time" :label="$t('付款时间')" align="center" :formatter="formatterTime"></el-table-column>
      <el-table-column prop="send_amount" :label="$t('付款金额')" align="center" />
      <el-table-column prop="send_currency" :label="$t('币种')" align="center" />
      <el-table-column prop="send_bank" :label="$t('付款银行名称')" align="center" />
      <el-table-column prop="send_card_name" :label="$t('付款人名称')" align="center" />
      <el-table-column prop="send_card_number" :label="$t('付款银行账号')" align="center" />
      <el-table-column prop="send_swift_code" :label="$t('Swift')" align="center" />
      <el-table-column :label="$t('支付凭证')" align="center">
        <template v-slot="scope">
                <el-image
                  class="mx-5 mb-4 h-10"
                  v-for="(item, index) in scope.row.attachments"
                  :key="index"
                  :src="item"
                  :zoom-rate="1.2"
                  :preview-src-list="scope.row.attachments"
                  :initial-index="index"
                  fit="cover"
                />
        </template>
      </el-table-column>
    </el-table>
    </template>
    <template v-else>
      <p class="text-center text-base">--</p>
    </template>
    </el-skeleton>
  </el-card>
  <el-card class="mb-4">
    <template #header>
      <div class="card-header">
        <span>{{$t('审核信息')}}</span>
      </div>
    </template>
    <el-skeleton :rows="5" animated :loading="loading">
      <div class="px-12">
        <div class="flex">
          <div class="flex-1">
            <ul class="text-center text-base">
              <li class="flex justify-around mb-4">
                <span class="w-36 text-right">{{$t('商户审核状态')}}</span>
                <span class="w-1/2 text-left"> {{ form.status === 3 ? "--" : form.mer_review_status_name}}</span>
              </li>
              <li class="flex justify-around mb-4" v-if="form.mer_review_status != 0">
                <span class="w-36 text-right">{{$t('商户审核结果')}}</span>
                <span class="w-1/2 text-left">{{ form.mer_review_reason }}</span>
              </li>
              <li class="flex justify-around mb-4" v-if="form.mer_review_status != 0">
                <span class="w-36 text-right">{{$t('商户审核时间')}}</span>
                <span class="w-1/2 text-left">{{ formatDates(form.audit_time) }}</span>
              </li>

            </ul>
          </div>
          <div class="flex-1">
              <ul class="text-center text-base">
              <li class="flex justify-around mb-4">
                <span class="w-36 text-right">{{ $t('平台审核状态') }}</span>
                <span class="w-1/2 text-left">
                  {{ form.status === 3 ? "--" : form.sys_review_status_name }}</span>
              </li>
              <li class="flex justify-around mb-4" v-if="form.sys_review_status != 0">
                <span class="w-36 text-right">{{ $t('平台审核结果') }}</span>
                <span class="w-1/2 text-left">{{ form.sys_review_reason }}</span>
              </li>
              <li class="flex justify-around mb-4" v-if="form.sys_review_status != 0">
                <span class="w-36 text-right">{{ $t('平台审核时间') }}</span>
                <span class="w-1/2 text-left">{{ formatDates(form.sys_audit_time) }}</span>
              </li>
              </ul>
          </div>
        </div>
      </div>
    </el-skeleton>
  </el-card>
  <el-dialog
    v-model="dialogVisible"
    :title="form.audit_status == 1 ? $t('审核通过') : $t('审核拒绝')"
    width="400"
    :destroy-on-close="true"
    :before-close="handleClose"
    :rules="rules"
  >
    <el-input
      v-model="form.reason"
      :rows="2"
      type="textarea"
      :placeholder="$t('填写审核意见')"
      prop="reason"
    />
    &nbsp;
    <!--要判断是否开启了谷歌验证-->
    <el-input
      v-model="form.google_code"
      :placeholder="$t('请填写谷歌验证码')"
      v-if="merchantStore.merchantInfo.withdraw > 0"
    />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">{{ $t('取消') }}</el-button>
        <el-button type="primary" @click="submit(form.audit_status)">{{ $t('确认') }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import {
  withdrawDetailApi,
  withdrawCancelApi,
  withdrawAuditApi,
} from "@/api/account/index";
import { ElMessageBox, ElMessage } from "element-plus";
import { Warning, Close, Check } from '@element-plus/icons-vue'
import { formatDates, numberToCurrencyNo } from "@/utils/utils";
import { useMerchantStore } from "@/store/modules/merchant";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const merchantStore = useMerchantStore();
const loading = ref(false);
const dialogVisible = ref(false);
const router = useRouter();
const form = reactive({});
const title = ref("");
const { ...route } = useRoute();

onMounted(() => {
  if (route.query.order_no) {
    getData(route.query.order_no);
  }
});
const getData = async (order_no) => {
  loading.value = true;
  try {
    const res = await withdrawDetailApi({ order_no: order_no });
    Object.assign(form, res);
    loading.value = false;
  } catch (error) {
    loading.value = false;
  }
};
// 校验
const rules = {
  reason: [{ required: true, message: t("请输入审核意见"), trigger: "blur" }],
};
const withdrawAudit = (status) => {
  form.audit_status = status; // 更新 form.status
  dialogVisible.value = true;
};

const handleClose = () => {
  dialogVisible.value = false;
};
const submit = async (status) => {
  const obj = {
    status: status, // 使用传递的 status 参数
    order_no: route.query.order_no,
    reason: form.reason,
  };
  if (merchantStore.merchantInfo.withdraw > 0) {
    obj.google_code = form.google_code;
  }
  try {
    const res = await withdrawAuditApi({ ...obj });
    ElMessage({
      showClose: true,
      message: status === 1 ? t("审核通过成功") : t("审核拒绝成功"),
      type: "success",
    });
    handleClose();
    //    handleGo();
    getData(route.query.order_no);
  } catch (error) {
    handleClose();
  }
};
const handleGo = () => {
  router.replace(`/account/withdraw`);
};
// 取消充值
const handleCancel = (item) => {
  ElMessageBox.confirm(t("您是否确认取消提现操作?"), t("温馨提示"), {
    type: "warning",
  })
    .then(async () => {
      const res = await withdrawCancelApi({
        order_no: item.order_no,
      });
      ElMessage({
        message: "success",
        type: "success",
      });
      getData(item.order_no);
    })
    .catch(() => {});
};
// Promise.all([getCurrencyData(), getCardsData()]);
</script>
